<template>
  <!-- 检验报告组件 -->
  <div>
    <!-- 价格 -->
    <div>
      <div
        class="background_gray padding_15 margin_top_20"
        style="border-radius: 5px; font-weight: 600"
      >
        价格
      </div>
      <!-- 价格 -->
      <label>
        <div class="flex_y_center" style="margin-top: 20px">
          <div style="width: 80px; text-align: right">价格：</div>
          <div style="width: 15%">
            <el-input
              v-model="inspectionForm.goods_price"
              placeholder="请输入价格"
            >
              <template slot="prepend">￥</template>
            </el-input>
          </div>
        </div>
      </label>
    </div>
    <!-- 商品属性 -->
    <div style="margin-top: 15px">
      <div
        class="background_gray padding_15"
        style="border-radius: 5px; font-weight: 600"
      >
        商品属性
      </div>
      <!-- 商品详情 -->
      <div class="margin_top_20" style="display: flex">
        <div style="width: 80px; text-align: right">商品详情：</div>
        <Vue-editor
          :goods-desc="inspectionForm.goods_content"
          @sendText="goodsContent"
        />
      </div>
    </div>
    <!-- 添加商品 -->
    <div style="width: fit-content; margin: 20px auto 0">
      <el-button type="primary" @click="$emit('sendData', inspectionForm)">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    components: {
      VueEditor: () => import('./editor.vue'),
    },
    props: {
      oGoodsDetailsInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        inspectionForm: {
          is_many_attribute: 'N',
          delivery_method: 'no', // 送货方式
          goods_price: '0.00', // 商品价格
          goods_content: '', // 商品详情
        },
      }
    },
    created() {
      this.assignForm()
    },
    methods: {
      // 将需要的数据赋值到相同属性值上
      assignForm() {
        if (JSON.stringify(this.oGoodsDetailsInfo) != '{}') {
          for (let item in this.inspectionForm) {
            this.inspectionForm[item] = this.oGoodsDetailsInfo[item]
          }
        }
      },

      goodsContent(text) {
        this.inspectionForm.goods_content = text
      },
    },
  }
</script>

<style scoped>
  .padding_15 {
    padding: 15px;
  }
  .background_gray {
    background-color: rgb(248, 248, 248);
  }
  .margin_top_20 {
    margin-top: 20px;
  }
</style>
